<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿select</title>
	<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
	<section class="warp">
		<div class="searchIpt clearFix">
			<div class="clearFix">
				<input type="text" class="keyWord" value="" />
				<input type="button" value="GO">
				<span></span>
			</div>
			<ul class="list">
				<li>html+css</li>
				<li>html5+css3</li>
				<li>javascript</li>
				<li>angular</li>
				<li>react</li>
				<li>vue</li>
				<li>jquery</li>
				<li>nodejs</li>
			</ul>
		</div>
	</section>

	<script>
		var keyWord = document.querySelector('.keyWord');
		var list = document.querySelector('.list');
		var lis = list.querySelectorAll('li');

		keyWord.onfocus = function() {
			list.style.display = 'block';
		}

		keyWord.onblur = function() {
			setTimeout(function() {
				list.style.display = 'none';
			}, 80);
		}

		for (var i=0; i<lis.length; i++) {
			lis[i].onclick = function() {
				for (var i=0; i<lis.length; i++) {
					lis[i].className = '';
				}
				this.className = 'active';
				console.log( this.innerHTML );
				keyWord.value = this.innerHTML;
			}
		}
	</script>
</body>
</html>